<template>
	<view class="container">
		<view class="top_text">支付密码用户资金提现，账户验证等涉及到资金安全的场景，请 避免设置容易被破解的数字。</view>
		<view class="content">
			
			<view class="label_box">
				<view class="label_name">输入密码</view>
				<input type="number" password maxlength="6" v-model="tab.pwd" placeholder="输入6位数字密码" />
			</view>
			<view class="label_box">
				<view class="label_name">再次输入密码</view>
				<input type="number" password maxlength="6" v-model="tab.repeatPwd" placeholder="输入6位数字密码" />
			</view>
			
		</view>
		<view @click="handleConfig" :class="['xjs-btn-primary',(!parseInt(tab.repeatPwd)||!parseInt(tab.pwd))?'xjs-btn-disabled':'','btn_box']">确认</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import api from '@/api'
	import CryptoJS from 'crypto-js';
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	import {debounce} from '@/hooks/useFunction'
	import { updateUserInfo } from '@/hooks/useLogin'
	let tab = reactive<any>({
		pwd:'',
		repeatPwd:''
	})
	const backDebounce = debounce(1000)
	const handleConfig = () => {
	  backDebounce(() => {
	    confirmBtn()
	  })
	}
	const confirmBtn = async () => {
		if(!tab.pwd){
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
			return
		}
		if(tab.pwd.length!=6){
			uni.showToast({
				title: '请输入6位数密码',
				icon: 'none'
			})
			return
		}
		if(tab.repeatPwd!=tab.pwd){
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			})
			return
		}
		// 密码用AES加密
		let key = CryptoJS.enc.Utf8.parse('xuelanfang123456')
		let iv = key
		let encryptedPasswd = CryptoJS.AES.encrypt(
			tab.repeatPwd,
			key, {
				iv: iv,
				mode: CryptoJS.mode.CBC,
				padding: CryptoJS.pad.ZeroPadding
			}
		)
		let pwdPay = encodeURIComponent(encryptedPasswd.toString())
		const res : any = await api({
			method: 'PUT',
			url: `/mall/bank-card/payment-pwd?pwd=${pwdPay}`
		})
		if(res.code=='0'){
			tab.pwd=''
			tab.repeatPwd=''
			uni.showToast({
				title: '设置成功',
				icon: 'none'
			})	
			const res1 = await updateUserInfo()
			if(res1.code=='0'){
				setTimeout(()=> {
					uni.navigateBack()	
				},1000)
			}	
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.lf {
		display: flex;
	}

	.lf-between {
		justify-content: space-between;
	}
	.lf-center{
		align-items: center;
	}
	.container {
		padding-bottom: var(--safe-area-bottom);
	}
	.top_text{
		margin: 42rpx 0 40rpx 32rpx;
		color: #7C807F;
		font-size: 24rpx;
	}
	.content {
		font-size: 30rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		margin: 0 32rpx;
		padding-bottom: 64rpx;
		.label_box{
			display: flex;
			align-items: center;
			margin:0 32rpx;
			border-bottom: 1rpx solid #E4E6E6;
			padding: 70rpx 0 26rpx 0;
			.label_name{
				width: 190rpx;
				margin-right: 72rpx;
			}
			.code_box{
				width: 400rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.code_ipt{
				width: 150rpx;
			}
		}
	}
	.btn_box{
		width: 686rpx;
		margin-top: 40rpx;
		margin-left: 32rpx;
		}
</style>